<template>
	<view class="container">
		<view class="panel-header padding-top solid-bottom">
			<view class="g-goBack" @click="$utils.toBack()">
				<view class="cuIcon-back"></view>
			</view>
			<view class="text-cut">{{info.userName}}</view>
		</view>
		<scroll-view scroll-x="true" class="bg-white nav">
			<view class="flex text-center">
				<view class="cu-item flex-sub" :class="index == tabIndex?'text-orange cur':''"
					v-for="(item,index) in tabListData" :key="index" @click="bindTabChange(index)">
				{{item}}
				</view>
			</view>
		</scroll-view>
		<view v-if="tabIndex == 0">
			<view class="panel-body padding bg-white margin-top-sm">
				<view class="flex justify-between">
					<view class="solids">
						<image :src="userImgUrl" mode="aspectFill" @error="bindImgError('userImg')"></image>
					</view>
					<view class="user-info">
						<view class="flex justify-between">
							<view>ID：{{info.userId||'-'}}</view>
							<view class="text-orange">{{info.roleTypeName}}</view>
						</view>
						<view>姓名：{{info.userName||'-'}}</view>
						<view>手机号：{{info.userPhone||'-'}}</view>
						<view>创建时间：{{info.createDate||'-'}}</view>
					</view>
				</view>
				<view class="flex justify-between margin-top">
					<view>备注</view>
					<view>{{info.note || '---'}}</view>
				</view>
				<view class="flex justify-between margin-top">
					<view>最后登陆时间</view>
					<view>{{info.lastLoginDate || '---'}}</view>
				</view>
				<view class="flex justify-around margin-top solid-top solid-bottom padding" v-if="info.roleType == 3">
				<view class="text-center">
					<view>分配设备数量</view>
					<view class="text-xl margin-top">{{info.deviceCount || 0 }}</view>
				</view>
				<view class="solid-right"></view>
				<view class="text-center">
					<view>分配网点数量</view>
					<view class="text-xl margin-top">{{info.placeCount || 0}}</view>
				</view>
			</view>
			</view>
			<view class="margin-top bg-white">
				<view class="flex justify-around padding-sm solid-bottom" v-for="(item,index) in roleTypeListData" :key="index">
					<view>角色权限：{{item.roleTypeName}}</view>
					<view>{{item.placeCount}}个网点</view>
				</view>
			</view>
			<view class="foot"><text class="ftxt">我也是有底线的</text></view>
		</view>
		<!-- 网点列表 -->
		<view class="list-body" v-if="tabIndex == 1">
			<scroll-view scroll-y="true">
				<view class="cu-card article" v-for="(item,index) in placeListData" :key="index">
					<view class="cu-item padding-sm" @click="toPlaceInfo(item.id)">
					   <view class="content margin-bottom">
						   <image :src="item.imgUrl?item.imgUrl:'/static/logo.jpg'" mode="aspectFill"></image>
						   <view class="info">
							   <view class="text-cut text-df text-orange">{{item.name}}</view>
							   <view>网点地区：{{item.province+'-'+item.city+'-'+item.cityArea}}</view>
							   <view>角色类型：{{item.roleTypeName}}</view>
							   <view>备注：{{item.note || '---'}}</view>
							   <view>分配时间：{{item.joinDate || '---'}}</view>
						   </view>
					   </view>
					   <view class="profit-info margin-sm">
						   <view class="flex justify-between solid-bottom padding-bottom-sm" v-for="(profit,profitIndex) in item.incomeRatioItems">
								<view>{{profit.businessTypeName}}</view>
								<view>{{profit.incomeRatio}}%</view>
						   </view>
					   </view>
					   <button class="cu-btn line-orange btn-info"><text class="cuIcon-searchlist"></text></button>
				   </view>
				</view>
				<view class="foot" v-if="placeListData && placeListData.length > 0"><text class="ftxt">我也是有底线的</text></view>
				<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
			</scroll-view>
		</view>
		<view class="list-body" v-if="tabIndex == 2">
			<scroll-view scroll-y="true">
				<view class="cu-list menu sm-border margin-top-sm">
					<view class="cu-item padding-sm" v-for="(item,index) in funcModelListData" :key="index">
						<view>功能模块：{{item.name}}</view>
						<view><switch class="switch-func" :data-id="item.id" :data-index="index" :class="item.state == 2?'checked':''" 
							:checked="item.state == 2?true:false" @change="funcModelChange"/></view>
					</view>
				</view>
				<view class="cu-list menu sm-border margin-top-sm" v-if="powerListData && powerListData.length > 0">
					<view class="cu-item padding-sm" v-for="(item,index) in powerListData" :key="index">
						<view>管理权限：{{item.name}}</view>
						<view><switch class="switch-func" :data-id="item.code" :data-index="index" :class="item.state == 2?'checked':''" 
							:checked="item.state == 2?true:false" @change="powerChange"/></view>
					</view>
				</view>
				<view class="foot"><text class="ftxt">我也是有底线的</text></view>
			</scroll-view>
		</view>
		<!-- 设备列表 -->
		<view class="list-body busi-type-panel" v-if="tabIndex == 3">
			<scroll-view scroll-y="true">
				<view class="cu-card">
					<view class="cu-item padding-sm" v-for="(item,index) in deviceListData" :key="index">
					   <view class="text-lg text-orange margin-bottom-xs">{{item.deviceSn}}</view>
					   <view>设备类型：{{item.deviceTypeName}}</view>
					   <view>设备功能：{{item.deviceFunNames}}</view>
					   <view v-if="item.placeId">部署网点：{{item.placeName}}</view>
					   <view v-else>部署网点：未部署</view>
					   <view v-if="item.placeId">部署地区：{{item.placeAreaName || '---'}}</view>
				    </view>
				</view>
				<view class="foot" v-if="deviceListData && deviceListData.length > 0"><text class="ftxt">我也是有底线的</text></view>
				<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
			</scroll-view>
			<view class="cu-bar btn-group list-footer" v-if="roleType == 1 && info.roleType == 3">
				<button class="cu-btn bg-orange round" @click="toAssignDevice()">批量分派</button>
				<button class="cu-btn bg-orange round" @click="btnScanAssignDevice()">扫码分派</button>
			</view>
		</view>
		<view class="list-body busi-type-panel" v-if="tabIndex == 4">
			<scroll-view scroll-y="true">
				<view class="cu-card" v-for="(item,index) in busiTypeListData" :key="index">
					<view class="cu-item padding-sm">
						<view>业务类型：{{item.businessTypeName}}</view>
						<view>分成比例：{{item.incomeRatio}}%</view>
						<view>编辑收费模版：{{item.editFeeState == 2?'可以':'不可以'}}</view>
						<view class="flex justify-end">
							<button class="cu-btn bg-red sm margin-right-sm" @click="btnDelBusiConfig(item)">删除</button>
							<button class="cu-btn bg-grey sm" @click="toUpdateBusiConfig(index)">修改</button>
						</view>
					</view>
				</view>
				<view class="foot" v-if="busiTypeListData && busiTypeListData.length > 0"><text class="ftxt">我也是有底线的</text></view>
				<view class="foot" v-else><text class="ftxt">暂无数据</text></view>
			</scroll-view>
			<view class="cu-bar btn-group list-footer">
				<button class="cu-btn bg-orange round" @click="toAddBusiConfig()">新增业务</button>
			</view>
		</view>
		
	</view>
</template>

<script>
	const wx = require('@/js_sdk/jweixin.js'); 
	export default {
		data() {
			return {
				roleType:this.$store.getters.GET_userInfo.roleType,
				
				userId:null,
				userImgUrl:'/static/def_face.jpg',
				info:{
					userName:'用户姓名'
				},
				
				deviceListData:[],
				deviceKeyword:null,
				devicePageNo:1,
				
				placeListData:[],
				placeKeyword:null,
				placePageNo:1,
				
				busiTypeListData:[],
				
				funcModelListData:[],
				
				powerListData:[],
				
				roleTypeListData:[],
				
				tabListData:["基础信息","网点信息"],
				tabLoadState:[0,0,0,0,0],				//tab加载状态，第一次切换时修改为1，后面判断是否为1，如果为1则不进行加载
				tabIndex:0,
				
				lastRequestTimes:null
			};
		},
		onLoad(option) {
			this.userId = option.id;
			this._loadInfo();
			this._jssdk();
		},
		onShow(){
			this.tabLoadState = [0,0,0,0,0];
			if(this.tabIndex == 3){
				this.tabLoadState[this.tabIndex] = 1;
				this.deviceListData = [];
				this.devicePageNo = 1;
				this._loadDeviceListData();
			}else if(this.tabIndex == 4){
				this.tabLoadState[this.tabIndex] = 1;
				this._loadBusiConfigList();
			}
		},
		methods:{
			_jssdk(){
				let url = location.href.split('#')[0];
				const api = this.$request;
				api.post(api.url.wxSDK,{
					appId:this.$store.getters.GET_AppId,
					url:url
				},res=>{
					console.log(res)
					if(res.code==200){
						const data = res.body;
						wx.config({
						  debug: false,
						  appId: data.config.appId,        // 必填，公众号的唯一标识
						  timestamp: data.config.timestamp,// 必填，生成签名的时间戳
						  nonceStr: data.config.nonceStr,  // 必填，生成签名的随机串
						  signature: data.config.signature,// 必填，签名
						  jsApiList: ['scanQRCode']        // 必填，需要使用的JS接口列表
						});
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else {
						uni.showToast({
							title:'初始化失败',
							icon:'error'
						})
					}
				})
			},
			_loadInfo:function(){
				if(this.userId){
					uni.showLoading({
						title:'加载中...'
					})
					const _self = this;
					const api = this.$request;
					api.post(api.url.teamUserInfo,{
						userId:this.userId
					},res=>{
						console.log(res);
						uni.hideLoading();
						if(res.code==200){
							_self.info = res.body;
							if(_self.info.userFaceImg){
								_self.userImgUrl = _self.info.userFaceImg;
							}
							if(this.roleType == 1){
								this.tabListData.push("权限管理");
								if(_self.info.roleType == 3){
									this.tabListData.push("设备列表");
									this.tabListData.push("业务管理");
								}
							}
							
							_self._loadRoleTypeListData();
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false,
								complete:function(){
									uni.navigateBack();
								}
							});
						}else {
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							});
							setTimeout(function(){
								uni.navigateBack();
							},1000);
						}
					})
				}else{
					uni.showToast({
						title:'参数错误',
						icon:'error'
					});
					setTimeout(function(){
						uni.navigateBack();
					},1000);
				}
			},
			_loadRoleTypeListData:function(){
				const _self = this;
				const api = this.$request;
				api.post(api.url.teamUserRoleTypeList,{
					userId:this.userId
				},(res)=>{
					console.log(res)
					uni.hideLoading();
					if(res.code==200){
						_self.roleTypeListData = res.body.items;
					}else if(res.code == 202){
						//不处理
					}else if(res.msg){
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						uni.showToast({
							title:'获取数据失败',
							icon:'error'
						})
					}
				})
			},
			_loadDeviceListData:function(){
				if(this.devicePageNo > 0){
					uni.showLoading({
						title:'加载中...'
					})
					const _self = this;
					const api = this.$request;
					api.post(api.url.teamUserDeviceList,{
						userId:this.userId,
						trim:this.keyword,
						pageNo:this.devicePageNo
					},(res)=>{
						console.log(res)
						uni.hideLoading();
						if(res.code==200){
							_self.deviceListData = _self.deviceListData.concat(res.body.items);
							_self.devicePageNo = _self.devicePageNo + 1;
						}else if(res.code == 202){
							_self.devicePageNo = -1;
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
					})
				}
			},
			_loadPlaceListData:function(){
				if(this.placePageNo > 0){
					uni.showLoading({
						title:'加载中...'
					})
					const _self = this;
					const api = this.$request;
					api.post(api.url.teamUserPlaceList,{
						userId:this.userId,
						trim:this.keyword,
						pageNo:this.placePageNo
					},(res)=>{
						console.log(res)
						uni.hideLoading();
						if(res.code==200){
							_self.placeListData = _self.placeListData.concat(res.body.items);
							_self.placePageNo = _self.placePageNo + 1;
						}else if(res.code == 202){
							_self.placePageNo = -1;
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
					})
				}
			},
			_loadFuncModelList:function(){
				console.log(this.info)
				if(this.info.roleType != null){
					this.funcModelListData  = [];
					this.powerListData  = [];
					uni.showLoading({
						title:'加载中...'
					})
					const _self = this;
					const api = this.$request;
					api.post(api.url.funcModelRoleTypeList,{
						userId:this.userId,
						type:this.info.roleType
					},(res)=>{
						console.log(res)
						uni.hideLoading();
						if(res.code==200){
							for(var index in res.body.items){
								var item = res.body.items[index];
								if(item.type == 2){
									_self.powerListData.push(item);
								}else{
									_self.funcModelListData.push(item);
								}
							}
						}else if(res.code == 202){
							//--
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
					})
				}
			},
			_loadBusiConfigList:function(){
				console.log(this.info)
				if(this.info.roleType != null){
					uni.showLoading({
						title:'加载中...'
					})
					this.busiTypeListData = [];
					const _self = this;
					const api = this.$request;
					api.post(api.url.busiTypeRoleTypeList,{
						userId:this.userId
					},(res)=>{
						console.log(res)
						uni.hideLoading();
						if(res.code==200){
							_self.busiTypeListData = res.body.items;
						}else if(res.code == 202){
							//--
						}else if(res.msg){
							uni.showModal({
								content:res.msg,
								showCancel:false
							})
						}else{
							uni.showToast({
								title:'获取数据失败',
								icon:'error'
							})
						}
					})
				}
			},
			bindImgError:function(type,index){
				if(type == 'userImg'){
					this.userImgUrl = '/static/yonghu.png';
				}
			},
			bindTabChange:function(index){
				this.tabIndex = index;
				if(index == 1){
					let state = this.tabLoadState[index];
					if(state == 0){
						this.tabLoadState[index] = 1;
						this._loadPlaceListData();
					}
				}else if(index == 2){
					let state = this.tabLoadState[index];
					if(state == 0){
						this.tabLoadState[index] = 1;
						this._loadFuncModelList();
					}
				}else if(index == 3){
					let state = this.tabLoadState[index];
					if(state == 0){
						this.tabLoadState[index] = 1;
						this._loadDeviceListData();
					}
				}else if(index == 4){
					let state = this.tabLoadState[index];
					if(state == 0){
						this.tabLoadState[index] = 1;
						this._loadBusiConfigList();
					}
				}
			},
			funcModelChange:function(e){
				console.log(e);
				if(this.$utils.isRepeat(this.lastRequestTimes)){
					this.funcModelListData = [];
					this._loadFuncModelList();
					uni.showToast({
						title:'点击过快！',
						icon:'none'
					})
					return;
				}
				this.lastRequestTimes = new Date();
				uni.showLoading({
					title:'加载中...'
				})
				var id = e.currentTarget.dataset.id;
				var state = 1;
				if(e.detail.value){
					state = 2;
				}
				const _self = this;
				const api = this.$request;
				api.post(api.url.teamUpdateFuncModel,{
					userId:this.userId,
					funcModelId:id,
					state:state
				},(res)=>{
					console.log(res)
					uni.hideLoading();
					if(res.code==200){
						_self._loadFuncModelList();
					}else if(res.msg){
						this.funcModelListData = [];
						this._loadFuncModelList();
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						this.funcModelListData = [];
						this._loadFuncModelList();
						uni.showToast({
							title:'修改数据失败',
							icon:'error'
						})
					}
				})
			},
			powerChange:function(e){
				console.log(e);
				if(this.$utils.isRepeat(this.lastRequestTimes)){
					this._loadFuncModelList();
					uni.showToast({
						title:'点击过快！',
						icon:'none'
					})
					return;
				}
				this.lastRequestTimes = new Date();
				uni.showLoading({
					title:'加载中...'
				})
				var id = e.currentTarget.dataset.id;
				var state = 1;
				if(e.detail.value){
					state = 2;
				}
				const _self = this;
				const api = this.$request;
				api.post(api.url.teamUpdatePower,{
					userId:this.userId,
					code:id,
					state:state
				},(res)=>{
					console.log(res)
					uni.hideLoading();
					if(res.code==200){
						_self._loadFuncModelList();
					}else if(res.msg){
						this._loadFuncModelList();
						uni.showModal({
							content:res.msg,
							showCancel:false
						})
					}else{
						this._loadFuncModelList();
						uni.showToast({
							title:'修改数据失败',
							icon:'error'
						})
					}
				})
			},
			btnDelBusiConfig:function(item){
				const _self = this;
				const api = this.$request;
				uni.showModal({
					title:'温馨提示',
					content:'确定要删除['+item.businessTypeName+']业务吗？',
					complete:function(res){
						if(res.confirm){
							api.post(api.url.teamDelBusiConfig,{
								userId:_self.userId,
								businessType:item.businessType
							},res=>{
								console.log(res)
								if(res.code==200){
									uni.showToast({
										title:'操作成功',
										icon:'success'
									});
									setTimeout(function(){
										_self._loadBusiConfigList();
									},1000)
								}else if(res.msg){
									uni.showModal({
										content:res.msg,
										showCancel:false
									});
								}else {
									uni.showToast({
										title:'操作失败',
										icon:'error'
									});
								}
							})
						}
					}
				})
			},
			toPlaceInfo(id){
				uni.navigateTo({
					url:"/pages/place/info?id="+id
				})
			},
			btnScanAssignDevice(){
				const _self = this;
				const api = this.$request;
				wx.ready(()=>{
					wx.scanQRCode({
						needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
						scanType: ["qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
						success: function (res) {
							console.log(res.resultStr);
							let arr = res.resultStr.split('/');
							let type = arr[arr.length - 3];
							if(type == 'dev'){
								let deviceSn = arr[arr.length - 1];
								api.post(api.url.deviceDistr,{
									userId:_self.userId,
									deviceSnList:[deviceSn]
								},res=>{
									console.log(res)
									if(res.code==200){
										uni.showModal({
											content:'分派成功',
											showCancel:false,
											complete:function(res){
												uni.navigateBack();
											}
										})
									}else if(res.msg){
										uni.showModal({
											content:res.msg,
											showCancel:false
										})
									}else{
										uni.showToast({
											title:'操作失败',
											icon:'error'
										})
									}
								})
							}else{
								uni.showModal({
									title:'温馨提示',
									content:'无效的设备二维码',
									showCancel:false
								})
							}
						}
					})
				})
			},
			toAssignDevice:function(e){
				const _self = this;
				uni.navigateTo({
					url:"../partner/assign_device",
					success: function(res) {
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('fromData', {
							userId:_self.userId
							,userName:_self.info.userName
						})
					}
				})	
			},
			toUpdateBusiConfig:function(index){
				const info = this.busiTypeListData[index];
				const _self = this;
				uni.navigateTo({
					url:'../partner/busi_type',
					success: function(res) {
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('fromData', {
							userId:_self.userId
							,userName:_self.info.userName
							,incomeRatio:info.incomeRatio
							,editFeeState:info.editFeeState
							,businessType:info.businessType
							,businessTypeName:info.businessTypeName,
						})
					}
				})
			},
			toAddBusiConfig:function(){
				const _self = this;
				uni.navigateTo({
					url:'../partner/busi_type',
					success: function(res) {
					    // 通过eventChannel向被打开页面传送数据
					    res.eventChannel.emit('fromData', {userId:_self.userId,userName:_self.info.userName})
					}
				})
			},
			//滑动底部加载
			scrollTolower:function(e){
				console.log(e);
				if(this.tabIndex == 1){
					this._loadPlaceListData();
				}else if(this.tabIndex == 2){
					this._loadDeviceListData();
				}
			}
		}
		
	}
</script>

<style lang="less">
.container {position:relative;height:100vh;}
.container .panel-header{height:90rpx;width:100vw;font-size:28rpx;background-color:#fff;}
.container .panel-header .text-cut{width:75%;margin:auto;text-align:center;}

.container .panel-body image{width:200rpx;height:200rpx;}
.container .panel-body .user-info{width:62vw;}

.busi-type-panel .cu-bar{position:absolute;bottom:0;left:0;right:0;}

.list-body scroll-view{height:85vh;}
.list-body .cu-card.article>.cu-item .content{padding:0;}
.list-body .cu-card.article>.cu-item .content>image{width:180rpx;height:180rpx;}
.list-body .cu-card.article>.cu-item .content .info{width:70%;}
.list-body .cu-card.article>.cu-item{margin-bottom:0;padding-bottom:0;font-size:26rpx;}

.list-body .cu-card>.cu-item .btn-info{position:absolute;top:0;right:0;border:0;font-size:42rpx;}
.list-body .cu-card>.cu-item .btn-info::after{border:0;}

.list-body .cu-card>.cu-item{position:relative;}
.list-body .cu-card>.cu-item .state-info{position:absolute;top:15rpx;right:15rpx;}
</style>
